<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
Copyright (c) 2008 Matthew Johnson
Licensed under the MIT License (see license.txt)	
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>More ActionML Buttons</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
	
<!-- {NAV} -->
<ul class="nav">
	<li>Markup
		<ul>
			<li><a href="getting_started.html">Getting started</a></li>
			<li><a href="attributes.html">Elements and attributes</a></li>
			<li><a href="actions.html">Events and actions</a></li>
			<li><a href="tweens.html">Tweens</a></li>
			<!--<li><a href="more_tweens.html">More tweens</a></li>-->
			<li><a href="custom_actions.html">Custom actions</a></li>
		</ul>
	</li>
	<li>Widgets
		<ul>
			<li><a href="buttons.html">Buttons</a></li>
			<li><a href="more_buttons.html">More buttons (and tabs)</a></li>
			<li><a href="filmstrip.html">Filmstrip</a></li>
			<li><a href="popup.html">Popup</a></li>
			<li><a href="drag_and_drop.html">Drag and drop</a></li>
			<li><a href="slider.html">Slider</a></li>
			<li><a href="scrollable_text.html">Scrollable text</a></li>
			<li><a href="media_controller.html">Media controller</a></li>
			<li><a href="video.html">Video</a></li>
		</ul>
	</li>
	<li>Example Media
		<ul>
			<li><a href="theories_and_assumptions/theories_and_assumptions.html">Tabs with drag and drop</a></li>
			<li><a href="group_counseling/group_counseling.html">Multiple videos with drag and drop</a></li>
		</ul>
	</li>
	<li><a href="cheatsheet.pdf">Cheatsheet</a></li>
	<li><a href="release_notes.html">Release Notes</a></li>
</ul>
<!-- {/NAV} -->
	
<h1>More ActionML Buttons</h1>
<p>Sometimes a basic button is not enough.  Sometimes you need a button that can be in different states.  For example, with a radio button you have a group of buttons and one of them at a time is selected.  The selected button will be visually distinct from the rest.  Another example of a button with multiple states is a play / pause button.  It changes from a play button to a pause button when you click it once, and then back to a pause button the next time.  This is an example of a state button (it cycles through its states one at a time).  In this tutorial you will learn how to create radio buttons and state buttons using ActionML.<p>

<h2>State Buttons</h2> 
<p>
A state button uses different frames marked by frame labels to indicate different states the button can be in.  Each time the button is clicked it moves to the next state.  When the last state is reached it loops back to the first state.  Here is what the timeline for a state button looks like:
<br /><img src="more_buttons/state_button.png" /><br />
And here is an example of a state button:
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=more_buttons/state_button.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=more_buttons/state_button.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=more_buttons/state_button.swf"></embed>
  </object>
  </noscript>
Download the fla for this example <a href="more_buttons/state_button.fla">here</a>.
</p>

<h2>Including transitions in a state button</h2> 
<p>
A state button can play timeline transitions rather than simply moving directly to the next state.  This is useful if you want to use timeline to create tweens between states like this:
<br /><img src="more_buttons/state_button_transition.png" /><br />
When you create transitions between states you will use the transition attribute in the XML.  Notice when you click the button that there is no transition back to the first state.  This is a current limitation of state buttons.  Here is the example of a state button with a transition:
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=more_buttons/state_button_transition.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=more_buttons/state_button_transition.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=more_buttons/state_button_transition.swf"></embed>
  </object>
  </noscript>
</p>

<h2>State buttons that don't loop</h2> 
<p>
Sometimes you will want a state button that does not loop back to the first state, for example if you wanted to create a button that changes its appearance after it has been clicked once (similar to a link that has been visited in a web page).  To prevent looping you simply set the loop attribute to false in your XML:
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=more_buttons/state_button_loop.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=more_buttons/state_button_loop.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=more_buttons/state_button_loop.swf"></embed>
  </object>
  </noscript>
</p>

<h2>Radio Buttons</h2> 
<p>
A radio button is part of a group of buttons.  Each button in the group contains 2 states: normal and selected.  Only one of the buttons is selected at a time. Here is an example of a timeline for a radio button containing normal and selected frame labels:
<br /><img src="more_buttons/radio_button.png" /><br />
You can specify which button is selected initially in your XML using the "selected" attribute.  You can include more than one group of radio buttons in the same piece by using the "groupName" attribute to specify which group a button will be part of.  Here is an example of 2 groups of radio buttons:
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=more_buttons/radio_button.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=more_buttons/radio_button.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=more_buttons/radio_button.swf"></embed>
  </object>
  </noscript>
Download the fla for this example <a href="more_buttons/radio_button.fla">here</a>.
</p>

<h2>Tabs</h2> 
<p>
A tab is simply a radio button that has a content attribute containing a comma separated list of instance names that indicate the content of the tab.  When a tab is selected all content for the tab is displayed and content for other tabs is hidden.	It is a good idea to place instances for each tab on a separate layer in your fla file so you can show one layer at a time and hide the rest.  Here is an example of this:
<br /><img src="more_buttons/tabs.png" /><br />
Now we will look at a simple example of using tabs.  Keep in mind that this is a simple example and tab content can and often will have interactive elements of its own.
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','850','height','400','src','InteractionDemo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','example_swf=more_buttons/tabs.swf','movie','InteractionDemo' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="850" height="400">
    <param name="movie" value="InteractionDemo.swf" />
    <param name="quality" value="high" />

	<param name="FlashVars" value="example_swf=more_buttons/tabs.swf" />
    <embed src="InteractionDemo.swf" width="850" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" FlashVars="example_swf=more_buttons/tabs.swf"></embed>
  </object>
  </noscript>
Download the fla for this example <a href="more_buttons/tabs.fla">here</a>.
</p>
</body>
</html>
